<!--
 * @Author: licongwei
 * @Date: 2022-03-08 11:08:02
 * @Description: 测试图表用例
-->
<template>
  <div class="wrap">
    <div class="btn" @click="handleClick">点击重绘</div>
    <div class="container">
      <div class="item">
        <charts :params="mixParams"></charts>
      </div>
      <div class="item">
        <!-- <charts :params="mix2Params"></charts> -->
        <charts :params="pieParams"></charts>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import httpRequest from '@/service'
import * as echarts from 'echarts'
export default defineComponent({
  name: 'HelloWorld',
  setup() {
    // 混合图表
    const mixState: any = reactive({
      params: {
        loading: true,
        map: {},
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
          // xAxis: [
          //   {
          //     axisLabel: {}
          //   }
          // ],
          yAxis: [
            {
              name: ['金额', '数量', ''],
              position: ['left', 'right']
            }
          ],
          grid: {
            top: 50,
            bottom: 50
          },
          dataZoom: [
            {
              show: true,
              type: 'slider',
              start: 0,
              end: 20
            }
          ],
          series: [
            {
              type: ['bar', 'line', 'bar'],
              itemStyle: {
                // color: '#000',
                // 不同系列颜色
                // color: ['#000', '#00cccc', '#cc0000'],
                // 不同系列渐变色（默认top向上渐变 此参数可省略）
                color: [
                  [['#fff', '#fdc330'], 'top'],
                  [['#fff', '#54f2be'], 'top'],
                  [['#fff', '#3591fd'], 'top']
                ],
                borderColor: ['#000', '#00cccc', '#cc0000'],
                borderWidth: 0,
                borderRadius: [5, 5, 0, 0]
              },
              areaStyle: {
                color: [
                  [['#fff', '#0000cc'], 'top'],
                  [['#fff', '#0000cc'], 'top'],
                  [['#fff', '#0000cc'], 'top']
                ]
              },
              barWidth: [10, 20, 20],
              yAxisIndex: [0, 1, 0]
            }
          ]
        },
        event: {
          click: (params: any) => {
            console.log('click')
            console.log(params)
          },
          getZrClick: (params: any) => {
            console.log('getZrClick')
            console.log(params)
          },
          customEvent: (chartInstance: echarts.ECharts) => {
            console.log('实例1')
            chartInstance.group = 'group1'
          }
        },
        // 自定义配置：默认false
        // 如果设置true，则所有配置项不做任何处理，将options直接设置到echart实例上，用于处理一些个性化较强的图表
        // custom: true
        // 轮播配置
        carousel: {
          show: true,
          trigger: 'axis',
          interval: 2000,
          direction: 0
        }
      },
      getData: () => {
        mixState.params.loading = true
        httpRequest
          .get({ url: 'testMix' })
          .then((res) => {
            mixState.params.options.dataset.dimensions = [
              Object.keys(res.data[0])[0],
              ...Object.keys(res.map)
            ]
            mixState.params.options.dataset.source = res.data
            mixState.params.map = res.map
            mixState.params.loading = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    const { params: mixParams } = toRefs(mixState)
    mixState.getData()

    const mix2State: any = reactive({
      params: {
        loading: true,
        map: {},
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
          // xAxis: [
          //   {
          //     axisLabel: {}
          //   }
          // ],
          yAxis: [
            {
              name: ['金额', '数量', ''],
              position: ['left', 'right']
            }
          ],
          grid: {
            top: 50,
            bottom: 50
          },
          series: [
            {
              type: ['bar', 'line', 'bar'],
              itemStyle: {
                // color: '#000',
                // 不同系列颜色
                // color: ['#000', '#00cccc', '#cc0000'],
                // 不同系列渐变色（默认top向上渐变 此参数可省略）
                color: [
                  [['#fff', '#fdc330'], 'top'],
                  [['#fff', '#54f2be'], 'top'],
                  [['#fff', '#3591fd'], 'top']
                ],
                borderColor: ['#000', '#00cccc', '#cc0000'],
                borderWidth: 0,
                borderRadius: [5, 5, 0, 0]
              },
              areaStyle: {
                color: [
                  [['#fff', '#0000cc'], 'top'],
                  [['#fff', '#0000cc'], 'top'],
                  [['#fff', '#0000cc'], 'top']
                ]
              },
              barWidth: [10, 20, 20],
              yAxisIndex: [0, 1, 0]
            }
          ]
        },
        event: {
          click: (params: any) => {
            console.log('click')
            console.log(params)
          },
          getZrClick: (params: any) => {
            console.log('getZrClick')
            console.log(params)
          },
          customEvent: (chartInstance: echarts.ECharts) => {
            console.log('实例2')
            chartInstance.group = 'group1'
          }
        },
        // 自定义配置：默认false
        // 如果设置true，则所有配置项不做任何处理，将options直接设置到echart实例上，用于处理一些个性化较强的图表
        // custom: true
        // 轮播配置
        carousel: {
          show: true,
          trigger: 'axis',
          interval: 2000,
          direction: 0
        }
      },
      getData: () => {
        mix2State.params.loading = true
        httpRequest
          .get({ url: 'testMix' })
          .then((res) => {
            mix2State.params.options.dataset.dimensions = [
              Object.keys(res.data[0])[0],
              ...Object.keys(res.map)
            ]
            mix2State.params.options.dataset.source = res.data
            mix2State.params.map = res.map
            mix2State.params.loading = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    const { params: mix2Params } = toRefs(mix2State)
    mix2State.getData()

    setTimeout(() => {
      echarts.connect('group1')
    }, 3000)

    // 饼图
    const pieState: any = reactive({
      params: {
        loading: true,
        map: { value: '系列1' },
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          tooltip: {
            trigger: 'item'
          },
          xAxis: [
            {
              show: false
            }
          ],
          yAxis: [
            {
              show: false
            }
          ],
          series: [
            {
              type: 'pie',
              radius: ['10%', '50%'],
              itemStyle: {
                color: (params: any) => {
                  const colorList = [
                    '#45C2E0',
                    '#C1EBDD',
                    '#FFC851',
                    '#5A5476',
                    '#1869A0',
                    '#FF9393',
                    '#0000cc'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }
          ]
        },
        // 轮播配置
        carousel: {
          show: true,
          trigger: 'item',
          interval: 2000,
          direction: 0
        }
      },
      getData: () => {
        pieState.params.loading = true
        httpRequest
          .get({ url: 'testPie' })
          .then((res) => {
            pieState.params.options.dataset.dimensions = ['name', 'value']
            pieState.params.options.dataset.source = res.data
            pieState.params.loading = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    const { params: pieParams } = toRefs(pieState)
    pieState.getData()

    // 点击重绘
    const handleClick = () => {
      mixState.getData()
      pieState.getData()
    }
    return {
      mixParams,
      mix2Params,
      pieParams,
      handleClick
    }
  }
})
</script>

<style scoped lang="less">
.wrap {
  .btn {
    width: 100px;
    height: 50px;
    background-color: #000;
    cursor: pointer;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container {
    display: flex;
    height: 500px;
    .item {
      flex: 1;
    }
  }
}
</style>
